<template>
  <span class="cart-counter-wrap">
    <span class="cartbutton-entitybutton">
      <transition name="move">
      <a href="javascript:" class="btn-minus" role="button" @click="minus($event)" v-show="foodCount>0" :disabled="(spec != null && spec.count < 0) || ( spec == null && food != null && food.specfoods.length > 1)" aria-label="删减商品"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#cart-add"></use></svg></a>
        </transition>
      <span role="button"  v-show="foodCount>0" class="cartbutton-entityquantity" v-text="foodCount"></span>
      <a href="javascript:" v-if="spec!=null || food.specfoods.length === 1" role="button" @click="add($event)" aria-label="添加商品"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#cart-minus"></use></svg></a>
      <a role="button"  v-if="spec==null && food.specfoods.length > 1" href="javascript:" @click="chooseSpec($event)" class="cartbutton-specadd"><span class="cartbutton-entityspecbutton">选规格</span></a>
    </span>
  </span>
</template>

<script>
  import Vue from 'vue'
  export default{
      name: 'CartCounter',
      data () {
          return {}
      },
      props: {
        food: {
          type: Object,
          default: null
        },
        spec: {
          type: Object,
          default: null
        }
      },
      computed: {
        foodCount () {
          let count = 0;
          if (this.spec != null) {
            count = this.spec.count;
          } else {
            this.food.specfoods.forEach((spec) => {
                if (spec.count && spec.count > 0) {
                count += spec.count;
              }
            })
          }

          return count;
        }
      },
      methods: {
        add (evt) {
          evt.stopPropagation();
          evt.preventDefault();
          if (this.spec != null) {
            this.spec.count++;
          } else {
            if (!this.food.specfoods[0].count) {
              Vue.set(this.food.specfoods[0], 'count', 1);
            } else {
              this.food.specfoods[0].count++;
            }
          }
        },
        minus (evt) {
          evt.stopPropagation();
          evt.preventDefault();
          if (this.spec != null) {
            if (this.spec.count > 0) {
              this.spec.count --;
            }
          } else {
            if (this.food.specfoods.length > 1) {
              this.$toasted.show('多规格商品只能去购物车删除哦', {duration: 2500, type: 'info'})
            } else {
              this.food.specfoods[0].count--;
            }
          }
        },
        chooseSpec (evt) {
          evt.stopPropagation();
          this.$emit('chooseSpec', this.food);
        }
      },
      components: {}
  }
</script>

<style>
  .btn-minus{
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear ;
    -ms-transition: all 0.3s linear ;
    -o-transition: all 0.3s linear ;
    transition: all 0.3s linear ;
  }
  .move-transition{
    opacity:1;
    -webkit-transform: translate3d(0,0,0);
    -moz-transform: translate3d(0,0,0);
    -ms-transform: translate3d(0,0,0);
    -o-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
  }
  .move-enter,.move-leave{
    opacity:0;
    -webkit-transform: translate3D(26px,0,0);
    -moz-transform: translate3D(26px,0,0);
    -ms-transform: translate3D(26px,0,0);
    -o-transform: translate3D(26px,0,0);
    transform: translate3D(26px,0,0);
  }
</style>
